<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{{config('website.website_title')}}</title>
    <link href="{{asset(config('view.frontend.login').'/css/login.css')}}" rel="stylesheet" type="text/css" />
</head>
<body style="background: #fff url({{asset(config('view.frontend.login').'/images/backgroud.png')}}) 50% 50% no-repeat;">
<div class="dowebok">
    <div class="logo"></div>
    <form id="login-from" method="post" action="{{route('f_Login_login')}}">
        {{csrf_field()}}
    <div class="form-item validate-input">
        <input id="username" name="username" type="text" autocomplete="off" placeholder="手机号或邮箱">
        <p class="tip" data-title="手机号或邮箱"></p>
    </div>
    <div class="form-item validate-input">
        <input id="password" name="password" type="password" autocomplete="off" placeholder="登录密码">
        <p class="tip" data-title="登录密码"></p>
    </div>
    <div class="form-item validate-input">
        <input id="captcha" name="captcha" type="text" autocomplete="off" placeholder="验证码">
        <p class="tip" data-title="验证码"></p>
    </div>
    <div class="form-item">
        <img id="refresh"
             style="cursor: pointer;width: 100%;height:48px;border-radius: 25px;"
             src="{{captcha_src()}}" alt="captcha" title="点击刷新验证码"
             onclick="loginMod.refreshCaptcha(this)"
        />
    </div>
    <div class="form-item">
        <button onclick="loginMod.submit(this)"
                type="button"
                data-params='{"formId":"login-from"}'

        >登 录</button>
    </div>
    </form>
    {{--<div class="reg-bar">
        <a class="reg" href="javascript:">立即注册</a>
        <a class="forget" href="javascript:">忘记密码</a>
    </div>--}}
</div>
<script src="{{asset(config('view.plugin').'/jquery/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset(config('view.plugin').'/layui/layui.all.js')}}"></script>
<script>
    var loginMod = (function () {
        var init = function () {
            $('.validate-input>input').focus(function () {
                $(this).siblings('.tip').hide();
            })
        }
        var refreshCaptcha = function (obj) {
            $(obj).attr('src','{{captcha_src()}}?t='+Math.random());
        };
        var submit = function(obj){
            if(!validate()){
                return false;
            }
            var load = layer.load(2);
            var params = $(obj).data('params');
            var data = $('#'+params.formId).serialize();
            $.ajax({
                type: 'post',
                url: params.url||$('#'+params.formId).attr('action'),
                dataType: 'json',
                data: data
            }).done(function (response) {
                if(response.status){
                    tooltips(response.msg,6);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    tooltips(response.msg,5);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    var errors = XMLHttpRequest.responseJSON.errors;
                    if(typeof errors == 'object') {
                        for (var index in errors) { // 不推荐这样
                            $('input[name='+index+']').siblings('.tips').text(errors[index][0]).show();
                        }
                    }else{
                        layer.msg(XMLHttpRequest.responseJSON.msg,{icon: 5});
                    }
                }else{
                    layer.msg('网络获取服务器出现问题',{icon: 5,shade:0.5});
                }

            }).always(function () {
                refreshCaptcha($('#refresh'));
                layer.close(load);
            });
        };
        var tooltips = function (msg,icon) {
            layer.msg(msg,{icon: icon,shade:0.5});
        };
        var validate = function (){
            var res = true;
            $('.validate-input').each(function () {
                var iptVal =$(this).children('input').val();
                if(!iptVal){
                    var title = $(this).children('.tip').data('title');
                    $(this).children('.tip').text(title+'不能为空').show();
                    res = false;
                    return false;
                }
            })
            return res;
        };
        return {
            refreshCaptcha:refreshCaptcha,
            submit:submit,
            init:init
        }
    })();
    loginMod.init();
</script>
</body>
</html>